<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="zs-table-page-container">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="queryParams.statementType" filterable clearable class="zs-select-md zs-space-right-sm"
          placeholder="报表类型">
          <el-option v-for="item in reportFormsType" :key="item" :label="item" :value="item" />
        </el-select>
        <el-input class="zs-select-md zs-space-right-sm" v-model="queryParams.statementNumber" placeholder="报表编号"
          clearable />
        <el-button class="zs-btn-plain" @click="queryList()">查询</el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
        :cloumns="tableData.cloumns" @pageChange="pageChange">
        <template #column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button class="zs-link" link size="small" @click="handleJumpMapPage(row)">查看</el-button>
              <!-- v-btnPermi="{ permis: [permissionIdent.seeList] }" -->
            </template>
          </el-table-column>
        </template>
      </hsPageTable>
    </div>
  </div>
</template>

<script setup>
import { getReportDownApi, queryReportListApi } from '@/api/SpecialReport/index.js'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from "vuex";
let store = useStore();
let router = useRouter()
const curPageSize = ref(store.state.uiPageSizeDefault);

// 报表类型
let reportFormsType = ref([])

let queryParams = reactive({
  pageNo:1,
  pageSize:curPageSize.value,
  statementType: '',
  statementNumber: ''
})

let tableData = reactive({
  loading: false,
  total: 0,
  data: [],
  cloumns: [
    { prop: "statementNumber", label: "报表编号", width: '100', align: "left" },
    { prop: "statementName", label: "报表名称", align: "left" },
    { prop: "remark", label: "报表说明", align: "left" },
    { prop: "groupName", label: "集团", width: '100', align: "left" },
    { prop: "statementType", label: "报表类型", width: '100', align: "left" },
  ]
})
// 分页变化
function pageChange (page) {
  queryParams.pageNo = page.current
  queryParams.pageSize = page.pageSize
  queryList()
}
function queryList () { 
  tableData.loading = true
  queryReportListApi(queryParams).then(res=>{
    let resData = res.data
    if(resData.code == 200){
      tableData.data = resData.data.childList
      tableData.total = resData.data.totalCount
    }
    tableData.loading = false
  })
}
queryList()


// 获取报表类型
function getReportFormsType() {
  getReportDownApi().then(res=>{
    let resData = res.data
    if(resData.code == 200){
      reportFormsType.value = resData.data
    }
  })
}
getReportFormsType()

function handleJumpMapPage (row) {
  const params = row.extend1 && row.extend1.length > 0 ? JSON.parse(row.extend1) : ''
  // row.pageKey = 'page_zhujiang_zjzyyly_list'
  // const params = {iframeUrl: 'https://cw.crehopson.com/zijin/9/2024-09.html'}
  
  if(params.isOpenWindow == true) {
    window.open(params.iframeUrl, '_blank')
  }else {
    router.push({
      path: '/page/routeController/index',
      query: {
          rid: row.pageKey,
          rTitle: row.statementName,
          ...params
      },
    })
  }
}
</script>

<style lang="scss" scoped></style>
